<template>
    <div id="running-star"></div>
</template>

<script>
    import * as THREE from "three"
    import {mapGetters} from "vuex"

    export default {
        name: "RunningStar",
        mounted() {
            this.createStar()
        },
        computed: {
            ...mapGetters("main", ["isGolden"])
        },
        methods: {
            createStar() {
                let container = document.getElementById("running-star")
                let width = container.clientWidth
                let height = container.clientHeight
                let aspect = width / height
                let renderer = new THREE.WebGLRenderer({alpha: true})
                renderer.setSize(width, height)
                container.appendChild(renderer.domElement)

                let scene = new THREE.Scene()

                let camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 1000)
                camera.position.z = 600

                let system = new THREE.Group() // planetary system

                scene.add(new THREE.AmbientLight(0xADE1FE, 0.2));

                let light = new THREE.DirectionalLight(0xADE1FE, 2.5)
                light.position.set(1500, 2500, 0)
                scene.add(light);

                let upLight = new THREE.DirectionalLight(0xADE1FE, 1.5)
                upLight.position.set(0, -2500, 0)
                scene.add(upLight);

                let material = new THREE.MeshLambertMaterial({color: this.isGolden ? 0xE89E44 : 0x3B5372})

                let plantGeo = new THREE.IcosahedronGeometry(100, 3)

                let planet = new THREE.Mesh(plantGeo, material)
                system.add(planet)

                let asteroids = new THREE.Group()

                for (let p = 0; p < Math.PI * 2; p = p + Math.random() * 0.15) {
                    let asteroidGeo = new THREE.IcosahedronGeometry(8, 0)
                    let asteroid = new THREE.Mesh(asteroidGeo, material)

                    let rand = Math.random() * 60 - 30
                    asteroid.position.set(200 * Math.sin(p) + rand, rand, 200 * Math.cos(p) + rand)

                    asteroids.add(asteroid)
                }

                system.add(asteroids)

                system.rotation.x = 0.1
                system.rotation.y = -.3
                system.rotation.z = -0.4

                scene.add(system)

                function render() {
                    requestAnimationFrame(render)

                    planet.rotation.y += 0.001
                    planet.rotation.z -= 0.0005

                    asteroids.rotation.y += 0.003

                    renderer.render(scene, camera)
                }

                render();
            }
        }
    }
</script>